<template>
  <div class="content-box button-demo">
    <h2 class="demo-title">Button 按钮</h2>
    <p class="demo-introduction">按钮用于开始一个即时操作。</p>
    <g-anchor>
      <g-anchor-link href="button-simple" title="基础用法" />
      <g-anchor-link href="button-disabled" title="禁用" />
      <g-anchor-link href="button-icon" title="图标按钮" />
      <g-anchor-link href="button-loading" title="加载中" />
      <g-anchor-link href="api" title="API" />
    </g-anchor>

    <!-- 基础用法DEMO -->
    <g-block-box
      :title="'基础用法'"
      introduction="基础的按钮用法。"
      id="button-simple"
    >
      <template v-slot:demo>  
        <g-row>
          <g-button >默认按钮</g-button>
          <g-button type="primary">主要按钮</g-button>
          <g-button type="success">成功按钮</g-button>
          <g-button type="warning">警告按钮</g-button>
          <g-button type="danger">危险按钮</g-button>
        </g-row>
        <g-row>
          <g-button round>圆角按钮</g-button>
          <g-button type="primary" round>主要按钮</g-button>
          <g-button type="success" round>成功按钮</g-button>
          <g-button type="warning" round>警告按钮</g-button>
          <g-button type="danger" round>危险按钮</g-button>
        </g-row>
        <g-row>
          <g-button icon="search" circle />
          <g-button type="primary" icon="mic" circle />
          <g-button type="success" icon="refresh" circle />
          <g-button type="warning" icon="layers" circle />
          <g-button type="danger" icon="ashbin" circle />
        </g-row>
      </template>
      <template v-slot:code>
        <code class="html">{{ fCode(simple.code.html) }}</code>
      </template>
    </g-block-box>

    <!-- 禁用DEMO -->
    <g-block-box
      :title="'禁用'"
      introduction="按钮不可用状态。"
      id="button-disabled"
    >
      <template v-slot:demo>
        <g-row>
          <g-button disabled>默认按钮</g-button>
          <g-button disabled type="primary">主要按钮</g-button>
          <g-button disabled type="success">成功按钮</g-button>
          <g-button disabled type="warning">警告按钮</g-button>
          <g-button disabled type="danger">危险按钮</g-button>
        </g-row>
      </template>
      <template v-slot:code>
        <code class="html">{{ fCode(disabled.code.html) }}</code>
      </template>
    </g-block-box>

    <!-- 图标按钮DEMO -->
    <g-block-box
      :title="'图标按钮'"
      introduction="带图标的按钮可增强辨识度（有文字）或节省空间（无文字）。"
      id="button-icon"
    >
      <template v-slot:description>
        <p>设置icon属性即可，icon 的列表可以参考 g-ui 的 icon 组件，也可以设置在文字右边的 icon ，只要使用i标签即可，可以使用自定义图标。</p>
      </template>
      <template v-slot:demo>
        <g-row>
          <g-button type="primary" icon="edit"></g-button>
          <g-button type="primary" icon="close"></g-button>
          <g-button type="primary" icon="search">搜索</g-button>
          <g-button type="primary">新增<g-icon name="add" class="g-icon--right"/></g-button>
        </g-row>
      </template>
      <template v-slot:code>
        <code class="html">{{ fCode(buttonIcon.code.html) }}</code>
      </template>
    </g-block-box>

    <!-- 加载中DEMO -->
    <g-block-box
      id="button-loading"
      :title="'加载中'"
      introduction="点击按钮后进行数据加载操作，在按钮上显示加载状态。"
    >
      <template v-slot:description>
        <p>要设置为 loading 状态，只要设置<code>loading</code>属性为<code>true</code>即可。</p>
      </template>
      <template v-slot:demo>
        <g-button type="primary" :loading="true">加载中</g-button>
      </template>
      <template v-slot:code>
        <code class="html">{{ fCode(loading.code.html) }}</code>
      </template>
    </g-block-box>
    <!-- API -->
    <div id="api">
      <h3 class="demo-table-title">Attributes</h3>
      <P class="demo-table-introduction">属性说明如下：</P>
      <g-table-simple :source="api" :type="'demo'" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      a: document.getElementById('router_view_box'),
      simple: {
        code: {
          html: `
          <g-row>
            <g-button>默认按钮</g-button>
            <g-button type="primary">主要按钮</g-button>
            <g-button type="success">成功按钮</g-button>
            <g-button type="warning">警告按钮</g-button>
            <g-button type="danger">危险按钮</g-button>
          </g-row>

          <g-row>
            <g-button round>圆角按钮</g-button>
            <g-button type="primary" round>主要按钮</g-button>
            <g-button type="success" round>成功按钮</g-button>
            <g-button type="warning" round>警告按钮</g-button>
            <g-button type="danger" round>危险按钮</g-button>
          </g-row>

          <g-row>
            <g-button icon="search" circle />
            <g-button type="primary" icon="mic" circle />
            <g-button type="success" icon="refresh" circle />
            <g-button type="warning" icon="layers" circle />
            <g-button type="danger" icon="ashbin" circle />
          </g-row>
          `,
        },
      },
      disabled: {
        code: {
          html: `
          <g-row>
            <g-button disabled>默认按钮</g-button>
            <g-button disabled type="primary">主要按钮</g-button>
            <g-button disabled type="success">成功按钮</g-button>
            <g-button disabled type="warning">警告按钮</g-button>
            <g-button disabled type="danger">危险按钮</g-button>
          </g-row>
          `,
        },
      },
      buttonIcon: {
        code: {
          html: `
          <g-row>
            <g-button type="primary" icon="edit"></g-button>
            <g-button type="primary" icon="close"></g-button>
            <g-button type="primary" icon="search">搜索</g-button>
            <g-button type="primary">新增<g-icon name="add" class="g-icon--right"/></g-button>
          </g-row>
          `
        }
      },
      loading: {
        code: {
          html: `<g-button type="primary" :loading="true">加载中</g-button>`
        }
      },
      api: [
        {
          parameter: 'type',
          description: '设置按钮类型',
          dataTypes: 'String',
          optional: 'default / primary / success  / danger / warning',
          default: 'default',
        },
        {
          parameter: 'round',
          description: '是否为圆角按钮',
          dataTypes: 'Boolean',
          optional: 'true/false',
          default: 'false',
        },
        {
          parameter: 'circle',
          description: '是否圆形按钮',
          dataTypes: 'Boolean',
          optional: 'true/false',
          default: 'false',
        },
        {
          parameter: 'loading',
          description: '是否加载中状态',
          dataTypes: 'Boolean',
          optional: 'true/false',
          default: 'false',
        },
        {
          parameter: 'disabled',
          description: '是否禁用按钮',
          dataTypes: 'Boolean',
          optional: 'true/false',
          default: 'false',
        },
        {
          parameter: 'icon',
          description: '图标类名',
          dataTypes: 'String',
          optional: '',
          default: '',
        },
      ],
    }
  }
}
</script>
<style lang="scss" scoped>
.button-demo .g-row {
  margin-bottom: 20px;
  .g-button {
    margin-right: 20px;
  }
}
</style>
